import React, { useEffect, useState } from "react";
import { Col, Row, Card, Avatar, Table, Spin } from "antd";
import avatarImg from "./../../images/avater.jpg";
import styled from "styled-components";
import Http from "./../../service/http";
import { getHomeData } from "./../../service/home";

import MyEcharts from "@/components/echarts/index";

const UserPage = styled.div`
  .user-info-card {
    .base-info {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .info {
        span {
          display: block;
          &:first-child {
            font-size: 20px;
            font-weight: bold;
          }
          &:last-child {
            font-size: 16px;
          }
        }
      }
    }
    .login-info {
      padding: 10px;
      box-sizing: border-box;
      border-top: 1px solid #eee;
      margin-top: 10px;
      p {
        display: flex;
        justify-content: space-between;
        span {
          font-size: 14px;
        }
      }
    }
  }

  .order-card {
    .order-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .order-num {
        padding-left: 20px;
        box-sizing: border-box;
        flex: 1;
        p {
          text-align: left;
          &:first-child {
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
    }
  }
`;

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "语文成绩",
    dataIndex: "ChineseScore",
    sorter: {
      compare: (a, b) => a.chinese - b.chinese,
      multiple: 3,
    },
  },
  {
    title: "数学成绩",
    dataIndex: "MathScore",
    sorter: {
      compare: (a, b) => a.math - b.math,
      multiple: 2,
    },
  },
  {
    title: "英语成绩",
    dataIndex: "EnglishScore",
    sorter: {
      compare: (a, b) => a.english - b.english,
      multiple: 1,
    },
  },
];

const onChange = (pagination, filters, sorter, extra) => {
  console.log("params", pagination, filters, sorter, extra);
};

const Home = () => {
  const [tableData, setTableData] = useState([]);
  const [barData, setBarData] = useState([]);
  const [pieData, setPieData] = useState([]);
  const [order, setOrder] = useState([]);

  useEffect(() => {
    getHomeData()
      .then((res) => {
        let { order, table, barData, pieData } = res;
        let barNameMap = ["华为", "小米", "荣耀", " OPPO"];
        pieData = pieData.map((value, idx) => {
          return {
            value,
            name: barNameMap[idx],
          };
        });
        setTimeout(() => {
          setTableData(table);
          setBarData(barData);
          setPieData(pieData);
          setOrder(order);
        }, 0);
      })
      .catch((err) => {
        console.log("首页接口数据获取失败 ...", err);
      });
  }, []);

  return (
    <UserPage>
      <Row>
        <Col span={8}>
          <Card
            hoverable
            style={{
              width: "98%",
              height: 260,
            }}
          >
            <div className="user-info-card">
              <div className="base-info">
                <Avatar size={80} src={avatarImg} />
                <p className="info">
                  <span>张三</span>
                  <span>普通管理员</span>
                </p>
              </div>

              <div className="login-info">
                <p>
                  <span>上次登录时间</span>
                  <span>2023:11:23</span>
                </p>
                <p>
                  <span>上次登录地址</span>
                  <span>北京</span>
                </p>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={16} className="order-card">
          <Row>
            {[0, 1, 2].map((idx) => {
              return (
                <Col span={8} key={idx}>
                  <Card hoverable style={{ width: "96%" }}>
                    <div className="order-info">
                      <div>
                        <img
                          src={avatarImg}
                          alt=""
                          style={{ width: 100, borderRadius: 5 }}
                        />
                      </div>
                      <div className="order-num">
                        <p>{order[idx]?.num}</p>
                        <p>{order[idx]?.name}</p>
                      </div>
                    </div>
                  </Card>
                </Col>
              );
            })}
          </Row>
          <Row style={{ marginTop: 10 }}>
            {[3, 4, 5].map((idx) => {
              return (
                <Col span={8} key={idx}>
                  <Card hoverable style={{ width: "96%" }}>
                    <div className="order-info">
                      <div>
                        <img
                          src={avatarImg}
                          alt=""
                          style={{ width: 100, borderRadius: 5 }}
                        />
                      </div>
                      <div className="order-num">
                        <p>{order[idx]?.num}</p>
                        <p>{order[idx]?.name}</p>
                      </div>
                    </div>
                  </Card>
                </Col>
              );
            })}
          </Row>
        </Col>
      </Row>
      <Row style={{ marginTop: 10 }}>
        <Col span={24}>
          <Card
            hoverable
            style={{
              width: "100%",
              height: 200,
            }}
          >
            {tableData.length > 0 ? (
              <Table
                columns={columns}
                dataSource={tableData}
                onChange={onChange}
                pagination={false}
                size="small"
                scroll={{
                  x: 1000,
                  y: 200,
                }}
              />
            ) : (
              <Spin />
            )}
          </Card>
        </Col>
      </Row>
      <Row style={{ marginTop: 10 }}>
        <Col span={12}>
          <Card
            hoverable
            style={{
              width: "98%",
              height: 300,
            }}
          >
            {barData.length > 0 ? (
              <MyEcharts
                styleObj={{ width: "100%", height: 300 }}
                xAxis={[
                  "jQuery",
                  "Vue",
                  "React",
                  "Angular",
                  "Next",
                  "JavaScript",
                ]}
                data={barData}
                type="bar"
              />
            ) : (
              <Spin />
            )}
          </Card>
        </Col>
        <Col span={12}>
          <Card
            hoverable
            style={{
              width: "98%",
              height: 300,
            }}
          >
            {pieData.length > 0 ? (
              <MyEcharts
                styleObj={{ width: "90%", height: 300 }}
                data={pieData}
                type="pie"
              />
            ) : (
              <Spin />
            )}
          </Card>
        </Col>
      </Row>
    </UserPage>
  );
};
export default Home;
